<template>
  <div class="header">
<!--    左边div-->
    <div class="left">
      <a href="/" style="padding-left: 60px">
        <img class="logo" src="../../assets/images/about/3917_jbrnt7ky.png" style="width: 70px;height: 35px;padding-bottom: 5px;">
        <span class="title">酒文化信息交流服务系统</span>
      </a>
    </div>
<!--  右边-->
    <div class="search">
      <el-input v-model="input" placeholder="请输入内容" style="width: 200px;height: 10px;"></el-input>
      <el-button type="primary" icon="el-icon-search"></el-button>
    </div>
    <!--      搜索栏-->
<!--    使用elementUI的指令下拉列表框-->
    <div class="right">
      <el-dropdown @command="handleCommand" style="float: right;padding-right: 10px">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <span class="el-dropdown-link">欢迎光临<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">账号设置</el-dropdown-item>
          <el-dropdown-item command="c">注册账号</el-dropdown-item>
          <el-dropdown-item command="b">安全退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import {logout} from "@/api/login";

export default {
  name: "HomepageHeader",
  props: {
    return: {
    }
  },
  data(){
    return{
      input: ''
    }
  },
  methods: {
    handleCommand(command) {
      // this.$message('click on item ' + command);
      switch (command){
        case'a':
          this.$router.push('/Personal')
          break;
        case'b':
          // this.$message('单击了退出账号');
          const token = localStorage.getItem("mySystem-token")
          logout(token).then(response=>{
            //方便我们简写
            const resp = response.data
            if(resp.flag){
              localStorage.removeItem("mySystem-token")
              localStorage.removeItem("mySystem-user")
              this.$router.push('/login')
            }
            else{
              this.$message({
                message:resp.message,
                //警告
                type:'warning',
                //单位时毫秒
                duration:1000
              })
            }
          })
          break;
        case'c':
          this.$router.push('/register')
          break;
      }
    }
  }
}
</script>

<style scoped>
.header{
  position:absolute;
  line-height: 50px;
  left: 0;
  right: 0;
  background:url("../../assets/header-background.jpg");

}
.left{
  width: 300px;
  height: 100%;
  float: left;
}
/*logo的样式*/
.logo{
  /*垂直居中对齐*/
  vertical-align: middle;
/*  圆角*/
  border-radius: 10px;
}
.title{
  /*绝对定位*/
  position: absolute;
  color: white;
  /*据左边距离*/
  padding-left: 15px;
  /*字体大小*/
  font-size: 20px;
}
.search{
  float: left;
  margin-left: 600px;

}
.right{
  float: right;
  margin-right: 30px;
}
.el-dropdown {
  /*float: right;
  margin-right: 30px;*/
  color: white;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-avatar{
  float: left;
  margin-right: 5px;
  margin-top: 5px;
}

</style>
